@import 'var';

bz-view {
  display: block;
  height: 100%;
  position: relative;
  // overflow: auto;
}

bz-view-header {
  display: block;
  padding: $box-space 1.5*$box-space;
  border-bottom: solid 1px $grey-4;
  background-color: $layout-nav-tab-bg;
}

bz-view-header .top {
  @include clearfix;

  &:empty {
    margin-top: -$box-space;
  }

  bz-view-title {
    float: left;
    line-height: 36px;
  }

  bz-view-action {
    float: right;
  }
}

bz-view-info {
  display: block;
  margin-top: $box-space;
  border-radius: $border-radius-base;

  &:last-of-type {
    margin-top: 0;
    margin-bottom: -$box-space;

    nz-tabset .ant-tabs-bar {
      margin-bottom: 0;
      border-width: 0;

      .ant-tabs-nav-container {
        margin-bottom: 0;
        font-size: $large-font-size;

        .ant-tabs-nav-wrap {
          margin-bottom: 0;

          .ant-tabs-nav {
            height: $page-view-info-tab-height - 1px;

            .ant-tabs-ink-bar {
              bottom: 0;
            }
          }
        }
      }
    }
  }

  &.inner {
    padding: $box-space;
    padding-bottom: 0;
    background-color: #fff;
  }
}

bz-view-title {
  font-size: 20px;

  small {
    font-size: 14px;
    color: $grey-7;
  }

  .warn {
    color: rgb(253, 139, 139);
  }
}

bz-view-tips {
  display: none;
  padding: 12px $box-space 0;
  width: 100%;
  min-width: 960px;

  &.show {
    display: block;
  }

  .bz-view-tips-box {
    transition: display 0.3s ease;
    position: relative;

    .close {
      position: absolute;
      right: 4px;
      top: 0px;
      cursor: pointer;
      color: #999;
    }

    .bz-view-tips-content {
      display: block;
      background: #fff;
      padding: $box-space;
      overflow: hidden;
    }
  }
}

bz-view-main {
  display: block;
  overflow: auto;

  .panel-container {
    @include clearfix;
  }

  .footer-wrapper {
    display: table;
    width: 100%;
  }
}

bz-view-main.ghost-panel {
  .panel-container {
    @include panel;
  }
}

bz-view-main.ghost-panel.ghost-panel-transparent {
  .panel-container {
    background-color: transparent;
    padding: 0;
  }
}

bz-view.header-fixed {
  // overflow: hidden;

  bz-view-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
  }

  bz-view-main {
    position: absolute;
    width: 100%;
    // margin-top: 1px;
    // 避免首次渲染闪烁
    // overflow-y: hidden;
    // overflow-x: hidden;
  }
}

@media screen and (max-width: #{$layout-aside-width + $view-main-min-width  }) {
  bz-view-main {
    overflow-x: auto !important;

    .panel-container,
    .footer-wrapper {
      width: $view-main-min-width;
    }
  }

  main.collapsed bz-view-main {
    overflow-x: unset;

    .panel-container,
    .footer-wrapper {
      width: unset;
    }
  }

  main.bz-steve.spa bz-view-main {
    overflow-x: unset;

    .panel-container,
    .footer-wrapper {
      width: 100%;
    }
  }
}

@media screen and (max-width: #{$layout-aside-collapsed-width + $view-main-min-width }) {

  main.collapsed bz-view-main {
    overflow-x: auto !important;

    .panel-container,
    .footer-wrapper {
      width: $view-main-min-width;
    }
  }

  main.bz-steve.spa bz-view-main {
    overflow-x: auto !important;

    .panel-container,
    .footer-wrapper {
      width: 100%;
    }
  }
}

bz-view-panel {
  @include panel;
  overflow: auto;

  &.ghost {
    background-color: transparent;
    padding: 0;
  }

  .title {
    color: #000;
    font-size: 1.1em;
    font-weight: 600;
    border-bottom: solid 1px $grey-5;
    padding: $box-space;
    margin: -$box-space;
    margin-bottom: $box-space;
  }

}

bz-view-panel.center {
  margin-left: auto;
  margin-right: auto;
}
